<!--用户管理页-->
<template>
  <div style="height: 6vh;padding: 10px 20px;background-color: #ffffff">
    <span style="line-height: 60px;font-size: 20px;">员工管理</span>
    <el-button type="primary" @click="beforeAddUser"
               style="float: right;margin-top: 10px">新建员工</el-button>
  </div>
  <!--  新建用户弹窗-->
  <!--  :before-close="handleClose"在弹窗关闭前调用此自定义函数
        这样避免点击弹窗外部也能将弹窗关闭的问题-->
  <el-dialog :title="dialogTitle"
             style="width: 1000px;padding: 40px"
             v-model="dialogVisible"
             :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"
                      :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.tel"
                      :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="员工学历"  >
            <el-select placeholder="请选择" v-model="saveUserForm.education"  >
              <el-option label="初中" value="10"></el-option>
              <el-option label="高中" value="20"></el-option>
              <el-option label="本科" value="30"></el-option>
              <el-option label="硕士" value="40"></el-option>
              <el-option label="博士" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄"v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="毕业学校">
            <el-input placeholder="请输入毕业院校" v-model="saveUserForm.graduSchool"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工简介">
            <el-input placeholder="请输入简介" v-model="saveUserForm.brief"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveUserForm.startTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input placeholder="请输入身份证号" v-model="saveUserForm.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="员工职称"  style="width: 200px">
            <el-select placeholder="请选择" v-model="saveUserForm.job" >
              <el-option label="初级教师" value="10"></el-option>
              <el-option label="高级教师" value="20"></el-option>
              <el-option label="财务总监" value="30"></el-option>
              <el-option label="校长" value="40"></el-option>
              <el-option label="助教" value="50"></el-option>
              <el-option label="前台" value="60"></el-option>
              <el-option label="系统管理员" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="管理员">-->
        <!--            <el-radio-group v-model="saveUserForm.isAdmin">-->
        <!--              &lt;!&ndash;          上面太大了会掉块&ndash;&gt;-->
        <!--              <el-radio border label="是" value="1" style="margin: 0"></el-radio>-->
        <!--              <el-radio border label="否" value="0"></el-radio>-->
        <!--            </el-radio-group>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <!--          上面太大了会掉块-->
              <el-radio border label="男" value="0" style="margin: 0"></el-radio>
              <el-radio border label="女" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="员工状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio  border label="启用" value="1" style="margin: 0"></el-radio>
              <el-radio  border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <!--    弹窗有自己的页脚并会自己设置样式-->
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>
  <!--  用户搜索卡片-->
  <el-card style="height: 70px;margin: 20px">
    <el-form :inline="true" >
      <el-form-item label="员工账号" style="width: 220px" >
        <el-input placeholder="输入员工账号" v-model="searchUserForm.tel" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="员工职称"  style="width: 200px">
        <el-select placeholder="请选择" v-model="searchUserForm.job"  @change="loadUser">
          <el-option label="初级教师" value="10"></el-option>
          <el-option label="高级教师" value="20"></el-option>
          <el-option label="财务总监" value="30"></el-option>
          <el-option label="校长" value="40"></el-option>
          <el-option label="助教" value="50"></el-option>
          <el-option label="前台" value="60"></el-option>
          <el-option label="系统管理员" value="70"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工状态" style="width: 200px">
        <el-select placeholder="请选择员工状态" v-model="searchUserForm.status" @change="loadUser">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-button style="position: relative;bottom: 10px" @click="resetSearch">重置</el-button>
      <el-button style="position: relative;bottom: 10px" type="primary" @click="loadUser">查询</el-button>
    </el-form>




  </el-card>
  <!-- 已绑定角色弹窗 -->
  <el-dialog title="已绑定角色" v-model="bindRoleDialogVisible" style="padding:40px;">
    <el-button type="primary" style="margin:10px 0;" @click="showUnbindPermList">添加角色</el-button>
    <el-table :data="bindPermArr">
      <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
      <el-table-column prop="code" label="角色编码" align="center"></el-table-column>
      <el-table-column prop="status" label="角色状态" align="center" :formatter="statusFormatter"></el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center">
        <template #default="scope">
          <el-button link type="primary" @click="removeBindPerm(scope.row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!-- 添加可绑定角色列表弹窗 -->
  <el-dialog title="可绑定权限列表" v-model="AddBindPermDialogVisible"
             :before-close="handleClose1">
    <el-table :data="unBindPermArr">
      <el-table-column label="编号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
      <el-table-column prop="code" label="角色编码" align="center"></el-table-column>
      <el-table-column prop="status" label="角色状态" align="center" :formatter="statusFormatter"></el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="bindNewPerm(scope.row.id,staffId)">绑定</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!--  用户数据表格-->
  <el-card style="margin: 20px">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80px" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="员工账号" prop="tel" align="center"></el-table-column>
      <el-table-column label="性别" prop="gender" align="center" :formatter="vehicleStatusFormatter"></el-table-column>
      <el-table-column label="职级" prop="job" align="center" :formatter="jobFormatter"></el-table-column>
      <el-table-column label="员工学历" prop="education" align="center" :formatter="educationFormatter"></el-table-column>
      <el-table-column label="毕业院校" prop="graduSchool" align="center"></el-table-column>
      <el-table-column label="入职时间" prop="startTime" align="center"></el-table-column>
      <el-table-column label="员工简介" prop="brief" align="center"></el-table-column>
      <el-table-column label="员工年龄" prop="age" align="center"></el-table-column>
      <el-table-column label="身份证号" prop="idCard" align="center"></el-table-column>
      <el-table-column label="员工状态" prop="status" align="center">
        <template #default="scope">
          <el-switch active-value="1"
                     inactive-value="0"
                     @change="changeStatus(scope.row.id,scope.row.status)"
                     v-model="scope.row.status"
                     :disabled="scope.row.level==40"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作"  align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="BindRole(scope.row.id)">绑定角色</el-button>
          <!--          <el-button link type="primary" :disabled="scope.row.level==40"-->
          <!--                     @click="resetPassword(scope.row.id)">密码重置</el-button>-->
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="editUser(scope.row.id)">编辑</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="deleteUser(scope.row.id,scope.row.username)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs"
import {ElMessage} from "element-plus";

// 定义变量控制弹窗是否出现
const dialogVisible = ref(false)
// 定义职级数组
const levelOptions = ref([
  {label:'职员',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'},
])
var staffId;
const BindRole =(id)=>{
  staffId=id
  let data = {
    staffId:id
  };
  bindRoleDialogVisible.value = true
  axios.post(BASE_URL+'8080'+'/v1/role/select',data).then((response)=>{
    if (response.data.code == 2000){
      bindPermArr.value = response.data.data
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}

const bindRoleDialogVisible = ref(false)
// 定义数组来维护员工直属领导数组
const leaderOptions = ref([

])
const showUnbindPermList =()=>{
  AddBindPermDialogVisible.value = true
  axios.post(BASE_URL +'8080'+ '/v1/role/selectUnBindRole/' + staffId).then((reponse) => {
    if (reponse.data.code == 2000) {
      unBindPermArr.value = reponse.data.data
    } else {
      ElMessage.error(reponse.data.msg)
    }
  })
}
const bindPermArr=ref()
const removeBindPerm =(id)=>{
  axios.post(BASE_URL+'8080' + '/v1/role/deleteRoleStaff/'  + id+ '/' + staffId).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('删除成功')
      BindRole(staffId)
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
const AddBindPermDialogVisible=ref(false)
const handleClose1 =()=>{
  if (confirm("是否关闭弹窗")) {
    AddBindPermDialogVisible.value = false
    BindRole(staffId)
  }
}
const unBindPermArr= ref([])
const bindNewPerm=(id,staffid)=>{
  staffid = staffId
  axios.post(BASE_URL +'8080'+ '/v1/role/addRoleStaff/' + id + '/' + staffid).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success("绑定成功")
      showUnbindPermList()
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
const vehicleStatusFormatter = (row,column,cellValue,index) =>{
  if (cellValue == 1){
    cellValue = '女';
  }else if (cellValue == 0){
    cellValue= '男'
  }
  return cellValue;
}
const statusFormatter =(row,column,cellValue,index)=>{
  if (cellValue == 1){
    cellValue= '启用';
  }else if (cellValue == 0){
    cellValue= '禁用'
  }
  return cellValue;
}
const educationFormatter = (row,column,cellValue,index) =>{
  if (cellValue == 10){
    cellValue = '初中';
  }else if (cellValue == 20){
    cellValue= '高中'
  }else if (cellValue == 30){
    cellValue= '本科'
  }else if (cellValue == 40){
    cellValue= '硕士'
  }else if (cellValue == 50){
    cellValue= '博士'
  }
  return cellValue;
}
const jobFormatter = (row,column,cellValue,index) =>{
  if (cellValue == 10){
    cellValue = '初级教师';
  }else if (cellValue == 20){
    cellValue= '高级教师'
  }else if (cellValue == 30){
    cellValue= '财务总监'
  }else if (cellValue == 40){
    cellValue= '校长'
  }else if (cellValue == 50){
    cellValue= '助教'
  }else if (cellValue == 60){
    cellValue= '前台'
  }else if (cellValue == 70){
    cellValue= '系统管理员'
  }
  return cellValue;
}


// 定义对象用来保存表单中的员工数据
const saveUserForm = ref({
  username:'',
  tel:'',
  idCard:'',
  job:'',
  education:'',
  graduSchool:'',
  startTime:'',
  brief:'',
  age:'',
  isAdmin:'',
  gender:'',
  status:''
})

const beforeAddUser =()=>{
//   弹窗出现
  dialogVisible.value = true
//   标题修改成新建用户
  dialogTitle.value = '新建员工'
}
//点击弹窗中的“保存用户按钮”=>新增+更新用户
const saveUser = () =>{
  // console.log(saveUserForm.value);
  let data = saveUserForm.value
  console.log(data)
  axios.post(BASE_URL+'7071'+'/v1/staff/save',data)
      .then((response) => {
        if (response.data.code == 2000){
          ElMessage.success('保存成功')
          //   用户确认关闭后关闭弹窗
          dialogVisible.value = false;
          //   清空已输入的表单数据
          saveUserForm.value={}
          //   加载页面
          loadUser()
        }else {
          ElMessage.error(response.data.msg)
        }
      })

}
// 处理弹窗关闭的方法
const handleClose = () =>{
  if (confirm('确认要关闭本窗口吗？')){
    //   用户确认关闭后关闭弹窗
    dialogVisible.value = false;
    //   清空已输入的表单数据
    saveUserForm.value={}
  }
}
// 定义对象来保存用户查询的条件
const searchUserForm = ref({tel:'',job:'',status:''});
// 定义对象保存查询到的用户表格数据
const userArr = ref([])
//
const loadUser = () =>{
//   // console.log(searchUserForm.value)
//   将得到的JS对象转成qs字符串
  let data = qs.stringify(searchUserForm.value)
//   发送get请求
  axios.get(BASE_URL+'7071'+'/v1/staff/select?'+data)
      .then((response)=>{
        console.log(response)
        console.log(response.data)
        console.log(response.data.code)
        console.log(response.data.data)

        if (response.data.code == 2000){
          userArr.value= response.data.data;
          console.log(userArr.value)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 生命周期函数页面加载完毕立即调用
onMounted(()=>{
  loadUser();
})
// 重置搜索
const resetSearch = () =>{
  // 清空之前的搜索内容
  searchUserForm.value={}
  // 重新加载所有的用户数据
  loadUser()
}
// 定义方法获取直属领导数据
const loadLeader = () =>{
// //优化：如果已经勾选了直属领导，再想重新选择职级的话，需要将之前的领导数组与已选的直属领导都清空
//   leaderOptions.value=[];
//   saveUserForm.value.parentId='';
// //   获取职级 并在此基础上加10 注意转为Number类型
//   let level = parseInt(saveUserForm.value.level)+10
// //   将职级发送给后端 获取直属领导有哪些人
//   axios.get(BASE_URL+'/v1/user/select?level='+level)
//       .then((response)=>{
//         if (response.data.code==2000){
//           //   把得到的直属领导保存到leaderOptions里面
//           leaderOptions.value=response.data.data
//         }else {
//           ElMessage.error(response.data.msg)
//         }
//
//       })
}
// 定义重置密码的方法 restful风格
// const resetPassword = (userId) =>{
//   // axios.post(BASE_URL+'/v1/user/update/password/'+userId)
//   //     .then((response)=>{
//   //       if (response.data.code==2000){
//   //         ElMessage.success('密码重置成功')
//   //       }else {
//   //         ElMessage.error(response.data.msg)
//   //       }
//   //     })
// }
// 定义变量用来控制弹窗的标题
const dialogTitle = ref('新建员工');
// 点击用户表格的编辑按钮 出弹窗+修改弹窗标题
const editUser = (id) =>{
//   // console.log(id)
// 弹窗出现
  dialogVisible.value = true
//   改标题
  dialogTitle.value='编辑员工'
//   根据id查询用户信息并回显在弹窗的表单中
  axios.get(BASE_URL+'7071'+'/v1/staff/select?id='+id)
      .then((response)=>{
        if (response.data.code==2000){
          //   因为返回的是集合所以要集合的第一条数据
          saveUserForm.value = response.data.data[0]
          // let level = parseInt(saveUserForm.value.level)+10
          // //   将职级发送给后端 获取直属领导有哪些人
          // axios.get(BASE_URL+'/v1/user/select?level='+level)
          //     .then((response)=>{
          //       if (response.data.code==2000){
          //         //   把得到的直属领导保存到leaderOptions里面
          //         leaderOptions.value=response.data.data
          //       }else {
          //         ElMessage.error(response.data.msg)
          //       }

          // })
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 修改员工状态
const changeStatus = (staffId,status)=>{
  axios.post(BASE_URL+'7071'+'/v1/staff/update/status/'+staffId+'/'+status)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('状态修改成功')
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}


// 删除员工信息
const deleteUser =(staffId,username)=>{
  // 出现确认框你是否要删除
  if (confirm("你是否要删除"+username)){
    axios.post(BASE_URL+'7071'+'/v1/staff/delete/'+staffId)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success('删除成功')
            //   重新加载页面
            loadUser()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>

</style>